<template>
  <div>
    <ItemMusicTop :playList="playList"></ItemMusicTop>
    <ItemMusicList
      :musicList="musicList"
      :subscribedCount="playList.subscribedCount"
    ></ItemMusicList>
  </div>
</template>
<script>
import { useRoute } from "vue-router";
import { getMusicDetail, getMusicItemList } from "@/request/api/item";
import ItemMusicTop from "@/components/Item/ItemMusicTop.vue";
import ItemMusicList from "@/components/Item/ItemMusicList.vue";
export default {
  data() {
    return {
      id: "",
      playList: {},
      privileges: [],
      musicList: [],
    };
  },
  comments: {
    ItemMusicTop,
    ItemMusicList,
  },
  methods: {
    getMusicDetail() {
      getMusicDetail(this.id).then((res) => {
        console.log(res.data);
        this.playList = res.data.playlist;
        this.privileges = res.data.privileges;
        //防治页面数据刷新丢失
        sessionStorage.setItem("musicDetail", JSON.stringify(res.data));
      });
    },
    getMusicList() {
      getMusicItemList(this.id).then((res) => {
        console.log(res.data);
        this.musicList = res.data.songs;
      });
    },
  },
  mounted() {
    //路由传值
    this.id = useRoute().query.id;
    this.getMusicDetail();
    this.getMusicList();
  },
  components: { ItemMusicTop },
};
</script>
